<template>
    <div class="container">
        <div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell mui-media">
								<span class="mui-navigate-right" @click="toAccount">
									<img class="mui-media-object mui-pull-left head-img" :src="imgurl+userInfo.u_icon">
									<div class="mui-media-body">
										{{userInfo.u_nickname}}
										<p class='mui-ellipsis'>账号:{{userInfo.u_account}}</p>
									</div>
								</span>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<router-link :to="'/user/account/'+userInfo.u_id" class="mui-navigate-right">账号与安全</router-link>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<router-link :to="'/user/vip/'+userInfo.u_id+'/'+viplist.v_id+'/'+viplist.v_content+'/'+viplist.v_discount" class="mui-navigate-right">信誉会员</router-link>
							</li>
							<li class="mui-table-view-cell">
								<router-link :to="'/bill/Addbill/'+userInfo.u_id" class="mui-navigate-right">查询订单</router-link>
							</li>
							<li class="mui-table-view-cell">
								<router-link to='/bill/unbill' class="mui-navigate-right">未完成订单页面</router-link>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="#about" class="mui-navigate-right">{{userInfo.u_phone}}<i class="mui-pull-right update">V3.1.0</i></a>
							</li>
						</ul>
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" style="text-align: center;">
								<a @click="exit">退出登录</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
    </div>
</template>
<script>
export default {
  data(){
    return {
      uid:"",
      imgurl:"http://localhost:3000/images/Head/",
		  userInfo:{
			     u_icon:"Head1.jpg"
		  },
      viplist:{}
    }
  },
  methods:{
    toAccount(){
      this.userInfo = this.userInfo;
    },
    exit(){
      // 退出登录数据库账号状态改为下线， localStorage清除要下线的账号  ， vuex清除要下线的账号 
      this.$ajax({
        url:"users/exit/"+this.uid,
        method:"get"
      }).then(resp=>{
        if(resp.data.status === 1){
          // let userInfos = JSON.parse(localStorage.getItem("userInfo"));
          
          this.$store.commit("exitUserInfo",{uid:this.uid});
          
          localStorage.setItem("userInfo",JSON.stringify(this.$store.getters.getUserInfo));
          localStorage.setItem("uid","0");
          this.$router.push("/user/login");
        }
      })
    },
    init(){
      this.uid = localStorage.getItem("uid");
      this.$ajax({
        url:"users/getUser/"+this.uid,
        method:"get"
      }).then(resp=>{
        this.userInfo = resp.data.message[0];
        this.getvip(this.userInfo.u_v_id)
      })
    },
    getvip(vid){     
            this.$ajax({
                url:"before/vipkind/"+vid,
                method:"get"
            }).then(resp=>{
                this.viplist = resp.data.message[0];
         })
    }
  },
  created(){
    this.init();
  }
}
</script>
<style scoped>
.mui-page-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #efeff4;
}
.mui-page .mui-table-view:first-child {
  margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
  margin-bottom: 30px;
}
.mui-table-view {
  margin-top: 20px;
}
</style>